{include file="common/header"}
<div id="app" v-cloak>
    <div class="el-warp">
        <div class="el-blog">
            <div class="left">
                <div class="cover">
                    <img src="{$system.c_cover}">
                </div>
                <div class="el-blog-crad">
                    <div class="header border">
                        公告栏
                    </div>
                    <div class="content">
                        {volist name=":blog(['isrecommend'], 5, $catalog.id, ['clicks' => 'desc'])" id="item"}
                        <a class="note-blog" href="{$item.url}">
                            <div class="info">{$item.title}</div>
                            <div class="time">{:csubstr($item.create_time,0,10)}</div>
                        </a>
                        {/volist}
                    </div>
                </div>
                <div class="catalog">
                    {volist name=":catalog_level(2, 'blog')" id="vo"}
                    <a href="{$vo.url}" class="item {if $catalog.id == $vo.id}active{/if}">{$vo.title}</a>
                    {/volist}
                </div>
                <div class="list">
                    {if count($list) == 0}
                    <el-empty description="亲亲，此分类下还没有文章哦~"></el-empty>
                    {/if}
                    {volist name="list" id="vo"}
                    <div class="el-blog-item">
                        <div class="warp">
                            <div class="header">
                                <el-popover
                                    placement="top"
                                    width="300"
                                    trigger="hover">
                                    <div class="el-blog-crad el-blog-popover">
                                        <a class="header" href="{$vo.user.url}" target="_blank">
                                            <img class="cover" src="{$vo.user.cover}">
                                            <span class="nickname">{$vo.user.nickname}</span>
                                            <img class="icon" src="{$vo.user.group.icon}" title="{$vo.user.group.title}">
                                        </a>
                                        <div class="content">
                                            {$vo.user.describe}
                                        </div>
                                    </div>
                                    <a slot="reference" href="{$vo.user.url}" class="author" target="_blank">{$vo.user.nickname}</a>
                                </el-popover>
                                <span class="vertical"></span>
                                <span class="time">{$vo.friend_time}</span>
                            </div>
                            <a href="{$vo.url}" target="_blank" class="title">
                                <span>{$vo.title}</span>
                                {if $vo.istop == 1}
                                <span class="istop">顶</spam>
                                {/if}
                            </a>
                            <div class="images">
                                {if count($vo.content_images) > 0}
                                <el-image 
                                    style="width:80px"
                                    src="{$vo.content_images[0]}"
                                    :preview-src-list='{:json_encode($vo.content_images)}'>
                                </el-image>
                                {/if}
                            </div>
                            <div class="bottom">
                                <a href="{$vo.url}" target="_blank" class="icon" title="浏览量"><i class="el-icon-view"></i>{$vo.clicks}</a>
                                <a href="{$vo.url}" target="_blank" class="icon" title="评论量"><i class="el-icon-chat-round"></i>{$vo.comment_count}</a>
                                <a href="{$vo.url}" target="_blank" class="icon" title="收藏量"><i class="el-icon-star-off"></i>{$vo.collect_count}</a>
                            </div>
                        </div>
                    </div>
                    {/volist}
                </div>
                {$page|raw}
                <div class="icp" style="font-size:12px">{$system.icp|raw}</div>
            </div>
            <div class="right">
                <div class="el-blog-crad">
                    <div class="header">
                        <img class="cover" src="{$system.public_logo}">
                        <span class="nickname">{$system.public_title}</span>
                    </div>
                    <div class="content" style="margin-bottom: 16px">
                        {$system.public_desc|raw}
                    </div>
                    <div class="bottom">
                        <div class="item">
                            <div class="title">主题帖</div>
                            <div class="desc">{:blog_count()}</div>
                        </div>
                        <div class="vertical"></div>
                        <div class="item">
                            <div class="title">回帖数</div>
                            <div class="desc">{:blog_comment_count()}</div>
                        </div>
                    </div>
                </div>
                <div v-if="JSON.stringify(userInfo) != '{}'" class="el-blog-crad">
                    <a class="header" :href="userInfo.url">
                        <img class="cover" :src="userInfo.cover">
                        <span class="nickname">{{userInfo.nickname}}</span>
                        <img class="icon" :src="userInfo.group.icon" :title="userInfo.group.title" style="width: 20px;vertical-align: middle;">
                    </a>
                    <div class="content">
                        {{userInfo.describe}}
                    </div>
                    <div class="bottom">
                        <div class="item">
                            <div class="title">文章</div>
                            <div class="desc">{{blog_count}}</div>
                        </div>
                        <div class="vertical"></div>
                        <div class="item">
                            <div class="title">回帖</div>
                            <div class="desc">{{blog_comment_count}}</div>
                        </div>
                        <div class="vertical"></div>
                        <div class="item">
                            <div class="title">收藏</div>
                            <div class="desc">{{blog_collect_count}}</div>
                        </div>
                    </div>
                </div>
                <div v-else class="el-blog-crad">
                    <span class="header">
                        <el-avatar icon="el-icon-user-solid" :size="32" style="margin-right:8px"></el-avatar>
                        <a href="{:index_url('login/index')}" class="nickname">登陆&nbsp;&nbsp;/</a>
                        <a href="{:index_url('login/register')}" class="nickname">&nbsp;&nbsp;注册</a>
                    </span>
                    <div class="bottom">
                        <div class="item">
                            <div class="title">文章</div>
                            <div class="desc">-</div>
                        </div>
                        <div class="vertical"></div>
                        <div class="item">
                            <div class="title">评论</div>
                            <div class="desc">-</div>
                        </div>
                        <div class="vertical"></div>
                        <div class="item">
                            <div class="title">粉丝</div>
                            <div class="desc">-</div>
                        </div>
                    </div>
                </div>
                <div class="el-blog-crad">
                    <div class="header border">
                        公告栏
                    </div>
                    <div class="content">
                        {volist name=":blog(['isrecommend'], 5, $catalog.id, ['clicks' => 'desc'])" id="item"}
                        <a class="note-blog" href="{$item.url}">
                            <div class="info">{$item.title}</div>
                            <div class="time">{:csubstr($item.create_time,0,10)}</div>
                        </a>
                        {/volist}
                    </div>
                </div>
                <div class="el-blog-crad">
                    <div class="header border">
                        热门帖子
                    </div>
                    <div class="content">
                        {volist name=":blog([], 10, $catalog.id, ['clicks' => 'desc'])" id="item"}
                        <a class="hot-blog hot-blog-{$key+1}" href="{$item.url}">
                            <div class="info info1">{$key+1}&nbsp;&nbsp;{$item.title}</div>
                            <div class="count">
                                <i class="el-icon-view" title="浏览"></i>{$item.clicks}
                            </div>
                        </a>
                        {/volist}
                    </div>
                </div>
                <div class="icp" style="font-size:12px">{$system.icp|raw}</div>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                route: '{$catalog.route}',
                keyword: locationUrl.get('keyword'),
                blog_count: 0,
                blog_comment_count: 0,
                blog_collect_count: 0,
            }
        },
        created() {
            this.count();
        },
        methods: {
            /**
             * 用户统计
             */
            count() {
                let self = this;
                post('api/blog/count/blog', {user_id: userInfo.id}, function (res) {
                    self.blog_count = res.count;
                })
                post('api/blog/count/comment', {user_id: userInfo.id}, function (res) {
                    self.blog_comment_count = res.count;
                })
                post('api/blog/count/collect', {user_id: userInfo.id}, function (res) {
                    self.blog_collect_count = res.count;
                })
            }
        }
    })
</script>
{include file="common/footer"}